<template>
    <div class="registration">
      <div class="header">
        <van-nav-bar title="申请注册" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
      </div>
      <header>
        <img src="../../assets/images/greenFinance/6.png"/>
        <p>您的信息已受到保护，请放心填写</p>
      </header>
      <section class="section">
        <div class="registration_from">
          <p>选择类型</p>
          <select v-model="fruit" >
            <option value="个体商户" id="hiddenInput">个体商户</option>
            <option value="公司注册" id="hiddenInput1">公司注册</option>
          </select>
        </div>
        <div class="registration_from">
          <p>办理地址</p>
          <input type="text" placeholder="请选择省市区" :value="addrInif" class="input1" @click="onSelAddr()" readonly="readonly">
          <van-popup v-model="showAdder" position="bottom" :overlay="false">
          <van-area :area-list="areaList" @confirm="onAddrConfirm" @cancel="onAddrCancel" />
          </van-popup>
        </div>
        <div class="registration_from">
          <p>公司名称</p>
          <input type="text" placeholder="注册公司名称3~5个（核名备用）" class="input1" v-model.trim='formData.aname'>
        </div>
        <div class="registration_from">
          <p>法人信息</p>
          <input type="text" placeholder="请填写法人姓名" class="input2" v-model.trim='legalPersonInfo[0].userName'>
         <div class="input3">
           <input type="text" placeholder="占股比例" v-model.trim='legalPersonInfo[0].ashare'> %
         </div>
          <input type="text" placeholder="请填写身份证号码" class="input1" v-model.trim='legalPersonInfo[0].idCardNo'>
        </div>
        <div class="registration_from">
          <div class="tianjia" @click="tianjia()">
            <van-icon name="add-o" />
            <p>添加股东</p>
          </div>
        </div>
        <div class="registration_from">
          <ul>
            <li v-for="(val , i) in shareholderInfoList"  class="scgd">
              <div @click="addInput" class="tj">添加股东</div>
              <!--<div v-for="(val,key) in item" :key="key">-->
                <div class="gudong">
                  <input type="text" placeholder="请填写法人姓名" v-model='val.name'>
                  <div class="input5">
                    <input type="text" placeholder="占股比例" v-model='val.scale'> %
                  </div>
                </div>
                <input type="text" placeholder="请填写身份证号码" class="input1" v-model='val.card_number'>
              <!--</div>-->

              <div class="tj" v-on:click='shareholderInfoList.splice(i, 1)'>删除股东</div>
            </li>
          </ul>
          <!--<div v-for="(item , i) in list" :key="i">-->
            <!--<span v-for="(val,key) in item" :key="key">-->
                <!--<lable>{{val.label}}</lable>-->
                <!--<input v-model="val.prop"></input>-->
            <!--</span>-->
          <!--</div>-->

        </div>
        <div class="registration_from">
          <p>注册资金</p>
          <div class="mon">
            <input type="number" placeholder="填写资金" class="input4" v-model.trim='formData.capital' oninput="if(value>900000000)value=900000000">
            <span>万</span>
          </div>

          <van-checkbox v-model="checked" checked-color="#07c160">我要验资</van-checkbox>
        </div>
        <div class="registration_from">
          <p>联系电话</p>
          <input type="number" placeholder="填写法人联系方式" class="input1" v-model.trim='formData.aphone' oninput="if(value.length>11) value=value.slice(0,11)">
        </div>
        <!--<div class="registration_from">-->
          <!--<p class="p12">邮寄法人代表及股东身份证原件</p>-->
          <!--<div class="address" @click="addressShow()">-->
            <!--<span>邮寄地址</span>-->
            <!--<van-icon name="arrow" />-->
          <!--</div>-->
        <!--</div>-->
        <div class="registration_from">
          <p class="p12">公司经营范围</p>
           <textarea type="text" placeholder="请填写公司经营范围" rows="3" v-model.trim='formData.businessScope'></textarea>
        </div>
        <div class="registration_from1">
          <p class="p12">上传证件信息</p>
          <div class="vue-uploader">
            <div class="file-list">
              <section v-for="(file, index) of files" v-if="index<=3" class="file-item draggable-item">
                <img :src="file.src" alt="" ondragstart="return false;">
                <span class="file-remove" @click="remove(index)">+</span>
              </section>
              <section v-if=" status == 'ready'" class="file-item">
                <div @click="add" class="add">
                  <span>+</span>
                </div>
              </section>
            </div>
            <p>办公室场所权证</p>
            <!-- 调用相机/图库 ref="file" 指定DOM节点 -->
            <input type="file" accept="image/*"  @change="fileChanged" ref="file" name="file"  multiple>
          </div>
        </div>
      </section>
      <button class="Merchant_button" @click="submit()">确认</button>
      <!--<van-popup v-model="show">-->
        <!--<div class="add1">-->
          <!--<p class="add1_left">李老师</p>-->
          <!--<p class="add1_right">15083156972</p>-->
          <!--<p class="p10">-->
            <!--邮寄地址：海南省海口市滨海大道百万广场20D-->
          <!--</p>-->
          <!--<div class="add1_ok">确定</div>-->
        <!--</div>-->
      <!--</van-popup>-->
    </div>
</template>

<script>
    import  AdderssInif from '../../../static/area'

    export default {
        name: "applicationRegistration",
      props: {
        src: { // 后台接受图片的http地址
          type: String,
          required: false
        }
      },

      data() {
        return {
          fruit: '个体商户',
          areaList:AdderssInif,
          addrInif:'',
          show: false,
          showAdder:false,
          showInput:false,
          checked: true,
          status: 'ready', // 状态
          files: [], // 图片数组
          formData: {
            aname: '',
            aphone: '',
            capital:'',
            businessScope:'',
          },
          legalPersonInfo:[{
            userName:'',
            idCardNo:'',
            ashare:'',
          },],

          shareholderInfoList: [],
          shareholderInfo:{name:'', scale:'', card_number:''},




        }
      },
      mounted() {
      },
      methods: {
          //显示邮寄地址
          addressShow(){
            this.show=true
          },
        addInput(){
          this.shareholderInfoList.push({name:'', scale:'', card_number:''});
          console.log(this.shareholderInfoList);
        },
        //显示地址
        onSelAddr(){
          this.showAdder=true
        },
        //显示地址确定
        onAddrConfirm(val){
          this.showAdder=false
          this.addrInif=val[0].name+''+val[1].name+''+val[2].name
          console.log("111",this.addrInif)
        },
        //显示地址取消
        onAddrCancel(){
          this.showAdder=false
        },


        //返回
        onClickLeft() {
          this.$router.go(-1);
        },
        //生成股东
        tianjia(){
          this.shareholderInfoList.push({name:'', scale:'', card_number:''});
            console.log(this.shareholderInfoList);
        },
        // 添加图片操作
        add() {
          this.$refs.file.click();
        },
        // 提交所有数据----请求后台
        async submit() {
          const formDatas=new FormData()
          if (this.files.length === 0) {
            this.$toast('请选择图片');
            return
          }
          let this_ = this;
          var token = this.$cookies.get("token") || localStorage.getItem('token');
          //设置店铺类型
          var value1=document.getElementById("hiddenInput").value;
          var value2=document.getElementById("hiddenInput1").value;
          let value3 = this.fruit==value1 ? value1 : value2
          let checkedInput=this.checked==true ? true : false
          for(var i in this.files){
            var src=this.files[i].file
            console.log("123"+src)
            formDatas.append('site_file_image_url',src)//帖子的配图
          }
          formDatas.append('company_name',this_.formData.aname)//发帖时的位置
          formDatas.append('company_type',value3)//帖子标题
          formDatas.append('business_scope',this_.formData.businessScope)//帖子内容
          formDatas.append('registered_capital',this_.formData.capital)//发帖时的位置
          formDatas.append('phone',this_.formData.aphone)//发帖时的位置
          formDatas.append('company_address',this.addrInif)//发帖时的位置
          formDatas.append('shareholderList',JSON.stringify(this.shareholderInfoList))//发帖时的位置
          formDatas.append('checked',checkedInput)//发帖时的位置
          formDatas.append('legalList',JSON.stringify(this.legalPersonInfo))//发帖时的位置

          this.$axios({
            method:"post",
            url: '/api/common/v1/greenFinance/businessRegisterApplication',
            data:formDatas,
            headers:{
              'Content-Type':'multipart/form-data'
            }
          }).then(res=>{
            if(res.success){
              this.$router.push({path: '/businessCircles'})
            }
             this.$toast(res.msg);

          }).catch(res=>{
        
          })
        },
        // 完成操作 还原状态
        finished() {
          this.files = []
          this.status = 'ready'
        },
        // 上传图片列表中的某个图片
        remove(index) {
          this.files.splice(index, 1)
        },
        // 唤醒相机/图库
        fileChanged() {
          const list = this.$refs.file.files
          for (let i = 0; i < list.length; i++) {
            if (!this.isContain(list[i])) {
              const item = {
                size: list[i].size,
                file: list[i]
              }
              // 转换图片格式
              this.html5Reader(list[i], item)
              this.files.push(item)
              // console.log('+++++++++++++++++');
              // console.log(this.files);
            }
          }
          this.$refs.file.value = ''
        },
        // 将图片文件转成BASE64格式
        html5Reader(file, item){
          const reader = new FileReader()
          reader.onload = (e) => {
            this.$set(item, 'src', e.target.result)
          }
          reader.readAsDataURL(file)
        },
        // 判断是否包含
        isContain(file) {
          this.files.forEach((item) => {
            if(item.size === file.size) {
              return true
            }
          })
          return false
        },
      }
    }
</script>

<style lang="less" scoped>
  .registration{width: 100%;background-color: #fff;}
  header{margin-top: 0.46rem;width: 100%;overflow: hidden;height: 0.43rem;line-height: 0.43rem;border-bottom: 2px solid #f7f7f7;}
  header img{width: 0.13rem;float: left;margin:0.12rem 0.1rem 0.12rem 0.15rem;}
  header p{float: left;color: #ff3d3d;}
  .section{padding-top: 0.15rem;}
  .registration_from{overflow: hidden;width: 100%;line-height: 0.45rem;}
  .registration_from p{float: left;width: 24%;text-align: left;padding-left: 0.2rem;}
  .registration_from select{float: right;height: 0.4rem;width: 66%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;margin-right: 0.21rem;}
  .input1{float: right;height: 0.4rem;width: 66%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;margin-right: 0.21rem;margin-bottom: 0.1rem;}
  .input2{float: left;height: 0.4rem;width: 32%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;margin-bottom: 0.1rem;margin-left: 4.5%;}
  .input3{float: left;height: 0.4rem;width: 31%;background-color: #f2f2f2;border-radius: 0.05rem;margin-left: 0.1rem;}
  .input3 input{border: 0;width: 80%;padding-left: 0.1rem;}
  .tianjia{float: right;margin-right: 0.21rem;}
  .tianjia i{font-size: 0.2rem;margin-top: 0.1rem;}
  .tianjia p{float:right;padding: 0 0.05rem;width: auto!important;}
  .gudong{float: right;margin-right: 0.21rem;width: 66%;}
  .gudong input{float: left;height: 0.4rem;width: 49%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;margin-bottom: 0.1rem;}
  .input5{float: left;height: 0.4rem;width: 46%;background-color: #f2f2f2;border-radius: 0.05rem;margin-left: 0.1rem;}
  .input5 input{border: 0;width: 80%;padding-left: 0.1rem;}
  .mon{float: left;height: 0.4rem;width: 40%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;margin-bottom: 0.1rem;margin-right: 0.05rem;margin-left: 4.5%;}
  .input4{float: left;height: 0.4rem;width: 80%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;margin-bottom: 0.1rem;}
  .van-checkbox{float: left;width: 25%;;}
  .address{float: right;margin-right: 0.21rem;color: #01bf47;}
  .address i{font-size: 0.16rem;position: relative;top:0.04rem;}
  textarea{width: 90%;margin: 0 5%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding:0.1rem;line-height: 0.22rem;}
  .registration_from1{padding-bottom: 0.2rem;}
  .registration_from1 p{width: 100%;padding-left: 0.1rem;line-height: 0.45rem;}
  .p12{float: left;width: 100%!important;text-align: left;padding-left: 0.2rem!important; }
  .vue-uploader {
    width: 90%;margin: 0 5%;
  .file-list {

  &:after {
     content: '';
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
     font-size: 0;
   }
  .file-item {
    float: left;
    position: relative;
    width: 100px;
    text-align: center;
  img{
    width: 80px;
    height: 80px;
    border: 1px solid #ececec;
  }
  .file-remove {
    position: absolute;
    right: 12px;
    display: none;
    top: 4px;
    width: 14px;
    height: 14px;
    color: white;
    cursor: pointer;
    line-height: 12px;
    border-radius: 100%;
    transform: rotate(45deg);
    background: rgba(0, 0, 0, 0.5);
  }
  &:hover{
  .file-remove {
    display: inline;
  }
  }
  .file-name {
    margin: 0;
    height: 40px;
    word-break: break-all;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  }
  }
  .add {
    width: 80px;
    height: 80px;
    margin-left: 10px;
    float: left;
    text-align: center;
    line-height: 80px;
    background-color: #f2f2f2;
    font-size: 30px;
    cursor: pointer;
  }
  .upload-func {
    display: flex;
    padding: 10px;
    margin: 0px;
    background: #f8f8f8;
    border-top: 1px solid #ececec;
  .progress-bar {
    flex-grow: 1;
  section {
    margin-top: 5px;
    background: #00b4aa;
    border-radius: 3px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    transition: all .5s ease;
  }
  }
  .operation-box {
    flex-grow: 0;
    padding-left: 10px;
  button {
    padding: 4px 12px;
    color: #fff;
    background: #007ACC;
    border: none;
    border-radius: 2px;
    cursor: pointer;
  }
  }
  }
  & > input[type="file"] {
      display: none;
    }
  }
  .upload-imgs{margin: 10px 0 30px 0;overflow: hidden;font-size: 0;}
  .upload-imgs li{position: relative;width: 118px;height: 118px;font-size: 14px;display: inline-block;padding: 10px;margin-right: 25px;border: 2px dashed #ccc;text-align: center;vertical-align: middle;}
  .upload-imgs li:hover{}
  .upload-imgs .add{display: block;background-color: #ccc;color: #ffffff;height: 94px;padding: 8px 0;}
  .upload-imgs .add .iconfont{padding: 10px 0;font-size: 40px;}
  .upload-imgs li:hover .add{}
  .upload-imgs li .upload{position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 118px;height: 118px;}
  .upload-imgs .img{position: relative;width: 94px;height: 94px;line-height: 94px;}
  .upload-imgs .img img{vertical-align: middle;width: 100%;}
  .upload-imgs .img .close{display: none;}
  .upload-imgs li:hover .img .close{display: block;position: absolute;right: -6px;top: -10px;line-height: 1;font-size: 22px;color: #aaa;}
  .Merchant_button {width: 90%;color: #fff;font-size: 0.16rem;margin: 0 5% 0.2rem;background-color: #01bf47;border: 0;border-radius: 0.05rem;line-height: 0.42rem;}
  .scgd{overflow: hidden;}
  .tj{float: left;width:24%;text-align: left;padding-left: 0.2rem; }
</style>
